<template>
	<view>
		<!-- <z-nav-bar title="绑定手机号"></z-nav-bar> -->
		<!-- 公共组件-每个页面必须引入 -->
		<!-- <public-module></public-module> -->
		<view class="bindAccountBox">
			<image :src="logoUrl"></image>
			<view><image src="../../static/icon/bindingIcon.png"></image></view>
			<image src="../../static/icon/WeChatIcon.png"></image>
		</view>
		<view class="inputItem">
			<view class="title">*手机号</view>
			<view class="info"><input type="number" placeholder="请输入" v-model="phone" /></view>
		</view>
		<view class="inputItem">
			<view class="title">*验证码</view>
			<view class="info">
				<input type="number" placeholder="请输入" v-model="code" />
				<button @tap.stop="onMultClick(getCode)">{{ codeText }}</button>
			</view>
		</view>
		<view class="registeredBut bindAccountBut"><button @tap.stop="onMultClick(onSubmit)">立即绑定</button></view>
	</view>
</template>

<script>
var clear;

import { mapState, mapMutations } from 'vuex';
// import socket from '@/config/socket';
export default {
	data() {
		return {
			logoUrl: '',
			readonly: false,
			codeText: '获取验证码',
			phone: '',
			code: '',
			onClick:true,
		};
	},
	//第一次加载
	async onLoad(e) {
		// #ifdef APP
		var data = JSON.parse(e.data)
		this.logoUrl = data.avatarUrl
		this.openid = data.openId
		// #endif
		
		// #ifdef H5
		this.openid = uni.getStorageSync('openid');
		await  this.$http.post('api/index/shareConfig').then(res => {
			const {
				logo
			} = res
			this.logoUrl = logo
		})
		// #endif
		
		
	},
	computed: {
		...mapState(['userInfo','chatScenesInfo'])
	},
	//页面显示
	onShow() {},
	//方法
	methods: {
		...mapMutations(['setUserInfo']),
		//验证码按钮文字状态
		getCodeState() {
			const _this = this;
			this.readonly = true;
			this.codeText = '60S后重新获取';
			var s = 60;
			clear = setInterval(() => {
				s--;
				_this.codeText = s + 'S后重新获取';
				if (s <= 0) {
					clearInterval(clear);
					_this.codeText = '获取验证码';
					_this.readonly = false;
				}
			}, 1000);
		},
		//获取验证码
		getCode() {
			if (this.readonly) {
				uni.showToast({
					title: '验证码已发送',
					icon: 'none'
				});
				return;
			}
			if (this.phone == '') {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				});
				return;
			}
			if (!this.$base.phoneRegular.test(this.phone)) {
				uni.showToast({
					title: '手机号格式不正确',
					icon: 'none'
				});
				return;
			}
			
			uni.showToast({
				title: this.phone,
				icon: 'none',
				duration: 5000
			});
			
			this.$http
				.post('api/user/smsCode', {
					mobile: this.phone,
				})
				.then(res => {
					console.log('api/user/smsCode=>', res)
					this.getCodeState();
				}).catch((err)=>{
					console.log('err', err);
				});
		},
		//账号绑定
		toSubmit(address){
			console.log('toSubmit');
			uni.showLoading({
				title:'请稍候',
				mask:true
			});
			this.$http.post('api/wechat/bind',{
				mobile: this.phone,
				sms_code: this.code,
				openid:this.openid,
				address
			}).then(res =>{
				uni.hideLoading();
				let { token } = res;
				uni.setStorageSync('userInfo',res);
				// setTimeout(() =>{
				// 	let need2url = uni.getStorageSync('need2url');
				// 	if( need2url ){
				// 		uni.removeStorageSync('need2url')
				// 		window.location.href = need2url;
				// 		return;
				// 	}
				// 	uni.reLaunch({
				// 		url:'/pages/index/index'
				// 	})
				// },17)
				uni.reLaunch({
					url:'/pages/index/index'
				})
			}).catch(()=>{
				uni.hideLoading();
			});
		},
		async onSubmit() {
			console.log('====onSubmit===');
			if (this.phone == '') {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				});
				return;
			}
			console.log('====手机号格式不正确===');
			if (!this.$base.phoneRegular.test(this.phone)) {
				uni.showToast({
					title: '手机号格式不正确',
					icon: 'none'
				});
				return;
			}
			if (this.code == '') {
				uni.showToast({
					title: '请输入验证码',
					icon: 'none'
				});
				return;
			}
			console.log('====正则===');
			if (!/^[0-9]{6}$/.test(this.code)) {
				uni.showToast({
					title: '验证码必须是6位数',
					icon: 'none'
				});
				return;
			}
			console.log('111----');
			// if(Comm.isWechat()){
			// 	console.log('isWechat');
			// 	Comm.getAddress().then(res=>{
			// 		console.log(res);
			// 		this.toSubmit(res);
			// 	}).catch(err=>{
			// 		this.toSubmit({});
			// 	});
			// }else{
			// 	console.log('else');
			// 	this.toSubmit({});
			// }
			this.toSubmit({});

			console.log('111');
			// const address = await Comm.getAddress();
			// console.log(address);
			return
			
			
			
			if (!(this.userInfo.wxSmallOpenId || this.userInfo.openId || this.userInfo.wxPublicOpenId)) {
				uni.showToast({
					title: '数据丢失',
					icon: 'none'
				});
				return;
			}
			let httpData = {
				openId: this.userInfo.openId || this.userInfo.wxSmallOpenId || this.userInfo.wxPublicOpenId,
				phone: this.phone,
				code: this.code,
				// #ifdef MP-WEIXIN
				type: 1201,
				// #endif
				// #ifdef H5
				type: 1301,
				// #endif
				// #ifdef APP-PLUS
				type: 1101
				// #endif
			};
			if(this.userInfo.unionid || this.userInfo.wxUnionid){
				httpData.unionid = this.userInfo.unionid || this.userInfo.wxUnionid;
			}
			// #ifdef H5
			let recommendCode = uni.getStorageSync("recommendCode");
			if(recommendCode){
				httpData.recommendCode = recommendCode;
			}
			// #endif
			// #ifndef H5
			if(this.chatScenesInfo.recommendCode){
				httpData.recommendCode = this.chatScenesInfo.recommendCode;
			}
			// #endif
			console.log('-----');
			this.$http
				.post('api/open/v1/third_bind',httpData)
				.then(res => {
					this.setUserInfo(res);
					uni.showModal({
						title: '提示',
						content: '账号绑定成功！',
						showCancel: false,
						success: res => {
							uni.navigateBack();
						}
					});
				});
		}
	},
	//页面隐藏
	onHide() {},
	//页面卸载
	onUnload() {},
	//页面下来刷新
	onPullDownRefresh() {},
	//页面上拉触底
	onReachBottom() {},
	//用户点击分享
	onShareAppMessage(e) {
		return this.wxShare();
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.bindAccountBox {
	height: 283upx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.bindAccountBox > image {
	width: 95upx;
	height: 95upx;
	border-radius: 15upx;
}
.bindAccountBox > view {
	width: 95upx;
	height: 95upx;
	padding: 0upx 20upx;
	display: flex;
	align-items: center;
}
.bindAccountBox > view image {
	width: 100%;
	height: 40upx;
}
.bindAccountBut {
	margin-top: 60upx;
}
.registeredBut {
	margin-bottom: 30upx;
	padding: 0upx 20upx;
}

.registeredBut button {
	font-size: 36upx;
	border-radius: 3upx;
	text-align: center;
	line-height: 90upx;
	height: 90upx;
	background-color: $themeColor;
	color: #fff;
}
.inputItem {
	background-color: #fff;
	display: flex;
	margin-top: 12upx;
	padding: 0 25upx;
}

.inputItem .title {
	min-width: 190upx;
	height: 100upx;
	line-height: 100upx;
	flex-shrink: 0;
	font-size: 30upx;
	white-space: nowrap;
}

.inputItem .info {
	flex: 1;
	display: flex;
	align-items: center;
	color: #999;
}

.inputItem .info input {
	height: 100upx;
	line-height: 100upx;
	font-size: 30upx;
	width: 100%;
}

.inputItem .info button {
	height: 80upx;
	line-height: 80upx;
	font-size: 28upx;
	flex-shrink: 0;
	padding: 0 15upx;
	border: 1upx solid $themeColor;
	background-color: #fff;
	color: $themeColor;
}
</style>
